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Abstract: Computer-aided learning (CAL) is used increasingly to teach anatomy in post-secondary programs. 
Studies show that augmentation of traditional cadaver dissection and model examination by CAL can be associated 
with positive student learning outcomes. In order to reduce costs associated with the purchase of skeletons and 
models and to encourage study outside of the laboratory period, interactive web-based CAL modules were 
developed for a comparative vertebrate anatomy course using skulls on hand, an open source image editor, and a 
simple text editor. Each module featured images of an animal skull in four orientations and allowed the user to 
identify individual bones and bony landmarks with a mouse. Study modules and practice quizzes were made 
available to students through the institution's learning management system for 24-hour access. 
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INTRODUCTION 

Anatomy courses are commonly offered in post¬ 
secondary education programs and may serve as an 
elective toward fulfillment of degree requirements, be 
required for admission into a profession program, or 
be required as part of graduate or professional 
program curricula. At some undergraduate 
institutions, both human anatomy and comparative 
vertebrate anatomy are offered as separate courses 
within the same academic department. 

The laboratory portion of anatomy courses is 
traditionally focused on dissection of preserved 
animal cadavers and examination of mounted 
skeletons and/or anatomical models. Models and 
skeletons used in these laboratories are quite 
expensive; for example, recent list prices from a 
biological supply catalog for a single mounted carp 
(fish) and dog skeleton were $579.00 and $939.00 
respectively. Skulls are slightly less costly; the same 
catalog listed a rabbit skull at $215.00 and a cow 
skull at $562.00. The costs of procuring non¬ 
expendable specimens for a new course can be 
beyond budget limitations. For example, the 
purchase of seven rabbit skulls for a class with an 
enrollment of fourteen students (one skull per pair of 
students) would require an initial investment of 
$1,505.00, excluding shipping costs. For labs 
featuring dissection, additional costs are associated 
with the use of preserved cadavers. Not only is there 
a cost to purchase and store the cadavers for the term, 
but also a significant cost for disposal. With strained 
course budgets, anatomy instructors may be faced 
with the decision of whether or not to replace old 
models or even include dissection as part of the 
curriculum (Winkelmann, 2007). 

One alternative for reducing the use of preserved 
materials or models is computer-aided learning 


(CAL) (Paalman, 2000). The use of CAL ranges 
widely from teaching human reproductive anatomy to 
elementary school students (Dalton et ah, 1989), to 
teaching basic veterinary anatomy (Khalil et ah, 

2005) and complex segmental liver anatomy for 
radiology residents (Kuszyk et ah, 1997). In addition 
to reducing the costs of materials, CAL provides 
instructors greater flexibility in dissemination of 
material and students with increased opportunities for 
learning (Paalman, 2000). Computer-aided learning 
appears to be as effective as traditional dissection in 
learning anatomy (Bukowski, 2002; Khalil et ah, 
2010; Hopkins et ah, 2011). In some cases, CAL 
used with traditional methods has produced positive 
learning outcomes (Elizondo-Omana et ah 2004). 
McNulty and colleagues (2004) found that as use of 
CAL increased so did medical students' anatomy 
exam scores. Studies also report that students readily 
and positively accept CAL (Allen et ah, 2008; Khalil 
et ah, 2010). 

I was faced with reinstating a comparative 
vertebrate anatomy course which had not been taught 
at my institution for more than ten years. Because of 
a limited budget for course supplies, incorporating 
CAL modules into the laboratory portion of the 
course became a viable alternative to purchasing a 
number of models and skeletons. Unfortunately, 
software featuring 3D interactive images can be 
expensive and writing code to generate complex 
programs can require specialized skills and 
equipment (Petersson et ah, 2009). To avoid extra 
costs and using a modest programming skill set, I 
created a series of web-based interactive modules for 
the study of mammalian skull anatomy using skulls 
already on hand, an open source image editor, and a 
text editor. The modules featured pointer-over 
identification of bones and bony landmarks with 
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color delineation of the borders of targeted bones and 
landmarks. An accompanying label identifying the 
targeted item was also highlighted when the pointer 
moved over it. By housing the modules on our 
institution's learning management system (LMS) 
(Jenzabar v. 7.4.2), students had instant access to the 
images and accompanying practice quizzes whenever 
they wished. 

METHODS 

Creation of each module required three separate 
steps: the photography and image touch-up, the 
image mapping and HTML (Hyper Text Markup 
Language) code generation, and finally, writing the 
JavaScript functions that do the actual real-time user 
interaction. HTML image mapping with JavaScript 
was selected for the following reasons: it has better 
cross-platform (Windows/Mac/Linux/Unix/other) 
compatibility, better low-bandwidth performance 
than Flash or specialty CGI (computer-generated 
imagery) coding, easier integration with existing 
server software and LMS engines, few browser or 
Flash version compatibility issues, and it requires 
minimal web coding. 

An Olympus E-500 8.0 megapixel digital camera 
with an Olympus 14-45 mm lens was used to 
photograph the individual skulls featured in the 
modules. With a square yard of black broadcloth 
serving as a background, each specimen was 
positioned on a one quart bag of sand placed under 
the cloth. In addition to the camera's flash, a 
fluorescent shop light and goose neck LED desk 
lamp provided back lighting. Skulls were 
photographed in separate frontal, dorsal, ventral, and 
lateral views. The initial images were saved in .tiff 
format at 3264 x 2448 pixels per inch resolution. 

Image maps delineating the borders of individual 
bones and bony landmarks within the images were 
created using the GNU Image Manipulation Program 
v. 2.6 (GIMP) (http://gimp.org, 2011) for Linux 
operating systems. GIMP is an open source program 
for image composition, photo retouching, and other 
types of image manipulations. The program will also 
run on Microsoft Windows and Mac OS X. I found 
the program to be very user friendly and well 
supported by tutorials and user group blogs. 

Image mapping of individual bones and 
landmarks within an image can be easily 
accomplished using the steps I followed. First, the 
image was cropped using the auto crop function 
<Image> ->Autocrop Image -> Edit -> Copy -> Edit - 
> Paste as -> New Image 

then scaled to 640 x 480 pixels at 72 pixels per inch 
resolution using the scale image function 
<Image> -> Scale Image 
in order to fit the viewing area of the LMS. The 
cropped image was saved in .png format for browser 
compatibility. I next selected the Web Image Map 
tool under Filters in the main toolbar 


<Filters> ->Web -> Image Map 
and using the polygon or circle selection, defined the 
area of an individual bone or landmark by tracing its 
boundaries or changing the size and position of the 
circle. GIMP automatically generated the associated 
HTML code defining the map. The following is a 
simplified example for a polygon drawn over a bone: 
<map name-'my map "> 

<area shape="poly" 

coords="202,240,250,238,273,350,193,313"> 
</map> 

Note that the map tag <map> ...</map> 
encapsulates an “area” tag. It is the area tag that 
defines the size and shape of a portion of the target 
image, that is, the specific bone or bony landmark. 
The comma-separated decimal values in the “coords” 
property are x,y pixel coordinates of angle points for 
the polygon. Put simply, the x,y coordinates are the 
“dots to be connected” in drawing the polygon. There 
may be multiple area tags for each image, as there 
were in the skull images. 

Each resulting set of area coordinates was 
identified in the Area Settings screen with the 
appropriate name of the bone or landmark mapped 
before mapping the next item in the image. The final 
image map containing multiple area coordinates was 
saved with a .map extension (Figure 1) (See 
Appendix 1 for the GIMP HTML snippet for Figure 
1 ). 

The next step in the process was to create a web 
page featuring the image and an accompanying 
legend with the name of each bone or bony landmark 
to be identified. I used a plain text editor to code the 
web page, but any standard web-page creation tool 
(e.g. Microsoft® Office FrontPage®) would work as 
well. The HTML in the .map file was copied and 
pasted into the web page HTML code following the 
image tag <img> that was modified to include a 
"usemap" property referencing the name of the skull 
image map (see Appendix 2). 

HTML image map area tags support a variety of 
JavaScript functions that allow user interactivity. In 
this case, when the cursor is moved into the target 



Fig 1 . Example of image-mapped bones and bony 
landmarks generated by the image mapping function of the 
Gnu Image Manipulation Program (GIMP) on a coyote 
skull. 
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area, the legend color of the target bone or bony 
landmark changes from green to yellow. The 
following functions were used in the modules: 

OnMouseOverQ - The mouse pointer is 
over a section of a particular mapped segment. 

OnMouseOut() - The mouse pointer has 
moved off the mapped segment previously reported. 

OnClick() - The mouse button has been 
clicked indicating a selection. 

The color of the text that changes is controlled 
by a style segment written in CSS (cascading style 
sheet) format. The style segment defines divisions 
(<divx/div>) or “chunks” of the web page and 
defines each particular division's general display 
attributes. A separate division was defined for each 
legend line that can control the display attributes, 
such as text color, for each legend line individually. 
Three similar JavaScript action functions were 
written to manipulate colors of the text descriptions 
of the mapped areas. This is an example of the 
“ramus” polygon area of Figure 1 modified to include 
three JavaScript action functions: 

<area shape=”poly” 

coords=”202,240,250,238,273,350,193,313” 
alt=”ramus” 

onMouseOver-’makeY ellow('text 1')” 
onClick=”makeGreen('text 1')” 
onMouseOut=”restoreColor('textT)” 

/> 

The addition of this code in each of the area tags 
is identical except for the designation of the bone 
name representing the mapped segment of the image 
(See Appendix 2). This method allowed me to not 
only create a multi-area mapped image but to use a 
single area for object level flexibility. The resulting 
web page was integrated into the LMS portal for the 
course. 

I created online practice quizzes within our LMS 
portal using its Test Builder function. The quizzes 
consisted of 20 multiple choice questions based on 
the four image views of each skull, reusing the 
mapped areas previously defined for the study 



Fig. 2. Example of an online practice quiz question to 
identify a bony landmark. Color delineation of the ramus 
was generated using the image mapping function of the 
Gnu Image Manipulation Program (GIMP). 


modules. Individual questions featured one of the 
images with a specific area highlighted to be 
identified (Figure 2). The mouse-related functions 
were not used in quiz questions. 

Students were given each of the skulls featured 
in the modules and a laptop computer to access the 
images during laboratory. They were allowed to 
work at their own pace for up to one hour of the 
laboratory period. In order to encourage them to use 
the module and quizzes for study, students received a 
handout containing instructions on how to access the 
materials (a copy of the handout may be requested by 
emailing the author). Practice quizzes were allotted a 
10 minute completion time but allowed unlimited 
attempts. 

RESULTS 

I made a preliminary assessment of the modules 
using practical exam scores for questions based on 
each skull, LMS usage statistics, and our standard 
student course evaluations. The skull modules 
consisted of 12 area-mapped images of three 
mammal skulls (coyote, deer, and human) in four 
orientations. Once familiar with the steps required, I 
was able to complete an image with up to 20 mapped 
bones or landmarks and create the associated web 
page in less than four hours. A demonstration of one 
of the modules is available at: 
http://facultyweb.berry.edu/rcarleton/skulldemo. 

Student use of the modules outside of laboratory 
varied. Five of the six students enrolled in the course 
accessed the study modules an average of 6.2 times 
(range 1 to 18 times). Four students accessed one or 
more module quizzes prior to the midterm exam. 

The amount of time students spent on quizzes and 
number of quiz attempts varied by skull type and by 
student. Quiz scores ranged from 11 of 20 correct 
(55.0%) to 20 of 20 correct (100.0%) depending on 
skull type and number of attempts. One student, who 
did not access the modules or quizzes outside of lab, 
missed five of the six questions pertaining to skull 
anatomy on the midterm examination; all other 
students answered the questions correctly. Each of 
the four students who completed the online course 
evaluation included positive comments about the 
modules. 

DISCUSSION 

Computer-aided learning can be easily 
incorporated into an anatomy course using good 
quality digital photography, an open source image 
editor, a fairly basic set of programming skills, and a 
little innovation. Creating my own CAL modules 
allowed me to customize the software to my course 
curriculum and to the specimens I had on hand. It 
also allowed me to work within my course budget by 
negating the need to purchase expensive materials 
and commercially-available software. Although not 
enough data were available to analyze learning 
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outcomes, it was determined that most of the students 
enrolled in the course voluntarily used the modules 
for study and generally did well on exam questions. 
Although it may seem daunting to develop CAL 
tools, I found it relatively easy, requiring minimal 
assistance, and well worth the effort. 
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APPENDIX 1 

Example of HTML code generated by the GIMP image mapping function to define bones and bony landmarks of the coyote skull featured in Figure 1. 
<map name—'mymap"> 

<!— #$-:Image map file created by GIMP Image Map plug-in —> 

<!— #$-:GIMP Image Map plug-in by Maurits Rijk —> 

<!— #$-:Please do not edit lines starting with "#$" —> 

<!— #$VERSION:2.3 ~> 

<!— #$AUTHOR:Renee Carleton —> 

<area shape—'poly" coords="202,240,250,238,273,350,193,313" alt="ramus" /> 

<area shape="poly" coords="84,270,131,292,128,306,80,300" alt="tympanic bulla" /> 

<area shape="poly" coords="26,270,61,235,73,242,45,299" alt="occipital condyle" /> 

<area shape="poly" coords="24,122,86,84,89,109,34,143" alt="sagittal crest" /> 

<area shape="poly" coords="298,349,508,362,501,392,387,411,280,400" alt="body of mandible" /> 

<area shape="poly" coords="394,187,524,216,548,273,345,298" alt="maxillary" /> 

<area shape="circle" coords="105,260,14" alt="extemal acoustic meatus" /> 

<area shape="poly" coords="84,202,168,183,164,238,128,245,88,230" alt="squamosal" /> 

<area shape—'poly" coords="305,193,366,219,340,281,313,262,273,183,282,177" alt="jugal” /> 

<area shape-'poly" coords-' 179,189,265,178,271,207,206,206,176,218" alt="zygomatic arch" /> 

<area shape-'poly" coords="236,95,282,97,393,171,372,210,250,153" alt="fiontal" /> 

<area shape-'poly" coords="543,228,567,276,598,283,556,231" alt="premaxilla" /> 

<area shape-'poly" coords="105,104,226,99,244,169,85,190,66,140" alt="parietal" /> 

</map> 
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APPENDIX 2 


Complete web page code to generate interactive mouse action identification of individual bones and bony landmarks of the coyote skull featured in Figure 1. 
<html> 

<head> 

<script language="javascript" type="text/javascript"> 
function makeGreen(object) { 

document. getElementByld(object). style, color = "green"; 

} 

function makeYellow(object) { 

if (document.getElementByld(object).style.color == "green") { 
document.getElementByld(object). style, color = "orange"; 

} else { 

document.getElementByld(object). style, color = "yellow"; 


function makeWhite(object) { 

document.getElementByld(object). style, color = "white"; 

} 

function restoreColor(object) { 

if (document.getElementById(object).style.color != "green") { 
if (document.getElementByld(object).style.color == "orange") { 
document. getElementByld(object). style, color = "green"; 

} else { 

document. getElementByld(object). style, color = "white"; 


function resetAll() { 
for (i=l; i < 25; i++) { 
var obj = "text" + i; 
make White(obj); 


</script> 

<style type="text/css"> 

div#main 
{width: 780px; 
height: 675px; 
margin-top: 0; 
margin-left: 0; 
margin-right: 0; 
margin-bottom: 0; 
padding: 0; 

background-color: black; 
overflow: hidden; 

} 

div#image 
{ width: 640px; 
height: 480px; 
float: right; 
margin-top: 0; 
margin-left: 0; 
margin-right: 0; 
margin-bottom: 0; 
padding: 0; 
overflow: hidden; 

} 

div#label 

{position: absolute; 
top: 0; 
left: 0; 

width: 155px; 
margin-bottom: 0; 
margin-left: 0; 
margin-right: 0; 
margin-top: 0; 
padding: 0; 

} 

div#textO,div#text 1 ,div#text2,dfv#text3 ,div#text4,div#text5 ,div#text6,div#text7,div#text8, 
div#text9,div#text 10,div#text 11 ,div#text 12,div#text 13 
{ font-family: arial; 
font-size: 13px; 
font-weight: bold; 
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color: white; 
margin-left: 3px; 
margin-top: lpx; 
margin-bottom: lpx; 
margin-right: 0; 
width: 160px; 
float: left; 

} 

</style> 

<title>Coyote Skull — Lateral View</title> 

</head> 

<body bgcolor=black> 

<div id="main"> 

<div id="image"> 

<map name—'map2"> 

<!— for coyoteskulllateral —> 

<!— #$-:Image map file created by GIMP Image Map plug-in —> 

<!— #$-:GIMP Image Map plug-in by Maurits Rijk —> 

<!— #$-:Please do not edit lines starting with "#$" —> 

<!— #$VERSION:2.3 -> 

<!— #$AUTHOR:Renee Carleton —> 

<!— Coyote Skull Lateral —> 

<area id="csll" shape="poly" coords="202,240,250,238,273,350,193,313" alt="ramus" onMouseOvei="makeYellow('textl')'' onClick="makeGreen('textl')" 
onMouseOut="restoreC olor('text 1 1 )" /> 

<area id="csl2" shape="poly" coords="84,270,l 31,292,128,306,80,300" alt="tympanic bulla" onMouseOver="makeYellow( l text2')" 
onClick="makeGreen('text2')" onMouseOut="restoreColor('text2')" /> 

<area id="csl3" shape="poly" coords="26,270,61,235,73,242,45,299" alt="occipital condyle" onMouseOver="makeYellow('text3')" 
onClick="makeGreen('text3')" onMouseOut="restoreColor('text3')" /> 

<area id="csl4" shape="poly" coords="24,122,86,84,89,109,34,143" alt="sagittal crest" onMouseOver="makeYellow('text4')" 
onClick="makeGreen('text4')" onMouseOut="restoreColor('text4')" /> 

<area id="csl5" shape="poly" coords="298,349,508,362,501,392,387,411,280,400" alt="body of mandible" onMouseOver="makeYellow('text5')" 
onClick="makeGreen('text5')" onMouseOut="restoreColor('text5')" /> 

<area id="csl6" shape="poly" coords="394,187,524,216,548,273,345,298" alt="maxillary" onMouseOver="makeYellow('text6')" 
onClick="makeGreen('text6')" onMouseOut="restoreColor('text6')" /> 

<area id="csl7" shape="circle" coords="105,260,14" alt="extemal acoustic meatus" onMouseOver="makeYellow('text7')" onClick="makeGreen('text7')" 
onMouseOut="restoreColor('text7')" /> 

<area id="csl8" shape="poly" coords="84,202,168,183,164,238,128,245,88,230" alt="squamosal" onMouseOver="makeYellow('text8')" 
onClick="makeGreen('text8')" onMouseOut="restoreColor('text8')" /> 

<area id="csl9" shape="poly" coords="305,193,366,219,340,281,313,262,273,183,282,177" alt="jugal" onMouseOver="makeYellow('text9')" 
onClick="makeGreen('text9')" onMouseOut="restoreColor('text9')" /> 

<area id="csll0" shape="poly" coords="179,189,265,178,271,207,206,206,176,218" alt="zygomatic arch" onMouseOver="makeYellow('textlO')" 
onClick="makeGreen('text 10')" onMouseOut="restoreColor('text 10')" /> 

<area id="csll 1" shape="poly" coords="236,95,282,97,393,171,372,210,250,153" alt="frontal" onMouseOver="makeYellow('textl 1')" 
onClick="makeGreen('textl 1')" onMouseOut="restoreColor('textl 1')" /> 

<area id="csll2" shape="poly" coords="543,228,567,276,598,283,556,231" alt="premaxilla" onMouseOver="makeYellow('textl2')" 
onClick="makeGreen('text 12')" onMouseOut="restoreColor('text 12')" /> 

<area id="csll3" shape="poly" coords="105,104,226,99,244,169,85,190,66,140" alt="parietal" onMouseOver="makeYellow('textl3')" 
onClick="makeGreen('textl3')" onMouseOut="restoreColor('textl3')" /> 

</map> 

<img src _ "imagc/coyote skull lateral.png " height="480" border="0" align="center" usemap="#map2" />"; 

</div> 

<div id="label"> 

<br><br> 

<div id=textl>&bull; Ramus</div> 

<div id=text2>&bull; Tympanic Bulla</div> 

<div id=text3>&bull; Occipital Condyle</div> 

<div id=text4>&bull; Sagittal Crest</div> 

<div id=text5>&bull; Body of Mandible</div> 

<div id=text6>&bull; Maxillary</div> 

<div id=text7>&bull; External Acoustic<br>&nbsp;&nbsp;&nbsp;&nbsp;Meatus</div> 

<div id=text8>&bull; Squamosal</div> 

<div id=text9>&bull; Jugal Bone</div> 

<div id=textl0>&bull; Zygomatic Arch</div> 

<div id=textl l>&bull; Frontal</div> 

<div id=textl2>&bull; Premaxilla</div> 

<div id=textl3>&bull; Parietal</div> 

</div> 

<div id="button" onLoad='resetAll()'> 

<input type=button name=Reset value="Reset Colors" onClick='resetAll()'> 

<br><br> 

</div> 

</div> 

</body> 

</html> 
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